<template>
  <baseCard :title="title" :height="height" :contentStyle="contentStyle">
    <div class="box">
      <VptReviewBar
        class="bar-view"
        v-bind="$attrs"
        :barStyle="barStyle"
        :top="top"
        :color="color"
        :bottom="bottom"
        :isShow="isShow"
        :chartType="chartType"
      ></VptReviewBar>
    </div>
  </baseCard>
</template>

<script setup>
import { ref, reactive } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import VptReviewBar from "@/pages/components/review-bar/index.vue";
const props = defineProps({
  contentStyle: {
    type: Object,
    default: {
      paddingTop: "0",
      paddingLeft: "0",
      paddingRight: "0",
    },
  },
  title: { type: String, default: "" },
  barStyle: {
    type: Object,
    default: () => ({
      marginTop: "0px",
      border: "none",
      background: "none",
    }),
  },
  top: {
    type: Number,
    default: 35,
  },
  bottom: {
    type: Number,
    default: 80,
  },
  height: { type: String, default: "" },
  // 柱子颜色
  color: { type: Array, default: () => [] },
  // 是否显示滚动条
  isShow: { type: Boolean, default: true },
  chartType: { type: String, default: "init" },
});
</script>

<style lang="less" scoped>
.backgroundc {
  background: #fff;
}
.box {
  width: 100%;
  height: 100%;
}
.bar-view {
  // width: 5rem;
  border: 0.01rem solid #e6ebf5;
  background: #0d2643;
  // height: 3.4rem;
  // margin-top: 0.2rem;
}
</style>
